<template>
  <custom-card :is-card="$props.card">
    <table-header
      :data="data"
      :filename="filename"
      :tableTitle="tableTitle"
      :isExport="isExport"
      :refresh="!!request"
    >
      <template #[item]="data" v-for="item in Object.keys($slots)">
        <slot :name="item" v-bind="data || {}"></slot>
      </template>
    </table-header>

    <div
      v-if="$slots.tableTop"
      class="pro-table__top"
      style="margin-bottom: 10px"
    >
      <slot name="tableTop"></slot>
    </div>

    <n-data-table
      ref="dataTableInst"
      v-bind="$props"
      :data="data"
      :size="density"
      :columns="columns"
      :scroll-x="scrollX"
      :pagination="false"
    />

    <div
      v-if="$slots.tableBottom"
      class="pro-table__bottom"
      style="margin-top: 10px"
    >
      <slot name="tableBottom"></slot>
    </div>
  </custom-card>
</template>

<script lang="ts" setup name="query-table">
  import { DataTableInst } from 'naive-ui'
  import { useOperation } from './hooks/useOperation'
  import { useColumnDisplay } from './hooks/useColumnDisplay'
  import { proTableBodyProps } from '../../props'
  import { useTableScrollToTop } from './hooks/useTableScrollToTop'

  const props = defineProps(proTableBodyProps)
  const emits = defineEmits(['refresh'])

  const dataTableInst = ref<DataTableInst | null>(null)
  const { pageIndex, pageSize, columnsAlign } = toRefs(props)

  const { columns, density, scrollX, excelExportDownload } = useOperation(
    props,
    emits
  )
  watch(
    columns,
    () => {
      useColumnDisplay(columns, columnsAlign, pageIndex, pageSize)
    },
    {
      immediate: true
    }
  )

  useTableScrollToTop({ pageIndex, pageSize, dataTableInst })

  defineExpose({
    excelExportDownload
  })
</script>

<style lang="less" scoped></style>
